/**
 * DOM 操作封装
 */

/* 通过id获取dom */
function getEle(id) {
  return document.querySelector(id);
}

/* 通过类名获取dom */
function getEleAll(className) {
  return document.querySelectorAll(className);
}

/* dom加载完毕 */
function ready(callback) {
  /* 
    文档加载事件:
        onload: 当页面所有资源(html,css,img,video,...)加载完成后,才执行js代码
        onDOMContentLoaded: 只要html结构加载完成,就可以执行js代码
    
    */
  window.addEventListener("DOMContentLoaded", function () {
    callback(); //调用方法  调用传入的方法
  });
}
//封装底部菜单
function bMenu(m) {
  getEle("footer").innerHTML = `
  <ul class="df">
  <li>
      <a class="${m=='home'?'active':''}" href="./home.html">
          <span class="iconfont icon-home"></span>
          <p>首页</p>
      </a>
  </li>
  <li>
      <a class="${m=='run'?'active':''}" href="./run.html">
          <span class="iconfont icon-ball"></span>
          <p>运动</p>
      </a>
  </li>
  <li>
      <a class="${m=='circle'?'active':''}" href="./circle.html">
          <span class="iconfont icon-frequency"></span>
          <p>圈子</p>
      </a>
  </li>
  <li>
      <a class="${m=='mine'?'active':''}" href="./mine.html">
          <span class="iconfont icon-mine"></span>
          <p>我的</p>
      </a>
  </li>
</ul>
  `;
}
function headMenu(m) {
  getEle('header').innerHTML = `
      <div class="df head-menu">
        <p class="${m=='run'?'active':''}" href="./run.html"><a href="./run.html">跑步</a></p>
        <p class="${m=='ride'?'active':''}" href="./ride.html"><a href="./ride.html">骑行</a></p>
        <p class="${m=='course'?'active':''}" href="./course.html"><a href="./course.html">课程训练</a></p>
      </div>
  `
}
let local = require("../utils/local.js");
function isLogin() {
  let token = localStorage.getItem("tk")||'';
  if (token.length==0) {
    window.location.href = "/login.html";
  }
}

// 暴露出去
module.exports = {
  getEle,
  getEleAll,
  ready,
  bMenu,
  isLogin,
  headMenu
};
